import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';

@inject('todo')
@observer
class TodoList extends Component {
  render() {
    const { todoDelete,chanageCompleted,filterTodo } = this.props.todo
    return (
      <section className="main">
        <input className="toggle-all" type="checkbox" />
        <ul className="todo-list">
          {
            filterTodo.map((todo,index) => {
              return (
                <li 
                  key={todo.taskName}
                  className={todo.isCompleted ? 'completed' :''}
                >
                  <div className="view">
                    <input
                      className="toggle"
                      type="checkbox"
                      checked={todo.isCompleted}
                      onChange={event=>chanageCompleted(index,event.target.checked)}
                    />
                    <label>{todo.taskName}</label>
                    <button className="destroy" onClick={()=>todoDelete(index)}></button>
                  </div>
                  <input className="edit" />
                </li>
              )
            })
          }
        </ul>
      </section>
    )
  }
}

export default TodoList